<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/12/26
  Time: 10:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue--%>
    <script src="/js/vue.js"></script>
    <%--axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <%--elementui--%>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
    <!-- 引入组件库 必须在引入vue文件后 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form :inline="true" :model="empSearchForm" class="demo-form-inline">
        <el-form-item label="编号">
            <el-input v-model="empSearchForm.staffid" placeholder="请输入员工编号"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
            <el-input v-model="empSearchForm.staffName" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="选择分店">
            <el-select v-model="empSearchForm.branchId" placeholder="请选择">
                <el-option v-for="b in branchs" :label="b.branchname" :value="b.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
            <%--添加按钮--%>
            <el-button type="primary" @click="addStaff()">添加</el-button>
        </el-form-item>
    </el-form>

    <%--添加对话框--%>
    <el-dialog title="添加员工" :visible.sync="dialogFormVisible">
        <el-form :model="staffAddForm" label-width="150px" :rules="staffAddFormRules" ref="staffAddFormRef">
            <el-form-item label="头像" prop="url">
                <%--
                   action: 上传地址--后端的上传接口
                   show-file-list：是否显示文件列表
                   on-success: 上传成功后的回调函数
                   before-upload: 上传前的钩子函数
                --%>
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <%--如果imageUrl有值，显示img标签--%>
                    <img v-if="imageUrl" :src="imageUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="员工编号" prop="staffid">
                <el-input v-model.number="staffAddForm.staffid" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工名称">
                <el-input v-model="staffAddForm.staffname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码">
                <el-input v-model="staffAddForm.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="staffAddForm.idcard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="员工地址">
                <el-input v-model="staffAddForm.address" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系方式">
                <el-input v-model="staffAddForm.phone" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="入职时间">
                <el-date-picker
                        v-model="staffAddForm.entrytime"
                        type="datetime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        placeholder="选择日期时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="门店店名">
                <el-select v-model="staffAddForm.branchid" placeholder="请选择门店店名">
                    <el-option v-for="b in branchs" :label="b.branchname" :value="b.branchid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="部门名称">
                <el-select v-model="staffAddForm.deptid" placeholder="请选择部门名">
                    <el-option v-for="d in depts" :label="d.deptname" :value="d.deptid"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="权限">
                <el-select v-model="staffAddForm.roleid" placeholder="请选择角色名">
                    <el-option v-for="r in roles" :label="r.rolename" :value="r.roleid"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="confirmAdd()">确 定</el-button>
        </div>
    </el-dialog>


    <el-table
            :data="emps"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="staffid"
                label="员工编号"
                width="200">
        </el-table-column>
        <el-table-column
                prop="staffname"
                label="员工姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="idcard"
                label="身份证号码"
                width="200">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="200">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话号码"
                width="150">
        </el-table-column>
        <el-table-column
                prop="entrytime"
                label="入职时间"
                show-overflow-tooltip
                width="150">
        </el-table-column>
        <el-table-column
                prop="branch.branchname"
                label="店名"
                width="150">
        </el-table-column>
        <el-table-column
                prop="role.rolename"
                label="职位名称"
                width="180">
        </el-table-column>
        <el-table-column
                prop="department.deptname"
                label="部门名"
                width="150">
        </el-table-column>
        <el-table-column
                prop="role.remark"
                label="职位描述"
                width="250">
        </el-table-column>
        <el-table-column
                prop="state"
                label="状态"
                width="100">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="250">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <%--
        @size-change:每页显示的条数改变
        @current-change:当前显示的页码改变
        current-page: 当前页码
        page-size: 默认每页显示的条数
        layout:
        total: 总条数
    --%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<script>
    var checkStaffId = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('编号不能为空'));
        }
        setTimeout(() => {
            if (!Number.isInteger(value)) {
                callback(new Error('请输入数字值'));
            } else {
                axios.get("/staff/checkStaffId?id=" + value).then(resp => {
                    if (resp.data.data) {
                        callback(new Error('编号已存在'));
                    } else {
                        callback();
                    }
                })
            }
        }, 100);
    };
    let app = new Vue({
        el: "#app",
        data: {
            empSearchForm: {},//搜索表单对象
            currentPage: 1, //当前页码
            pageSize: 5, //每页显示条数
            total: 0, //总条数
            emps: [],//员工列表
            branchs: [],//分店列表
            roles: [],//职位列表
            depts: [],//部门列表
            dialogFormVisible: false,//控制模态框显示或隐藏
            staffAddForm: {},//添加员工表单对象
            imageUrl: "",//上传图片地址
            staffAddFormRules: {
                staffid: [
                    {validator: checkStaffId, trigger: 'blur'}
                ]
            }

        },
        created() {
            this.loadStaff();//加载员工列表
            //加载所有的分店
            this.loadBranch();
            //加载所有部门
            this.loadDept();
            //加载所有职位
            this.loadRole();

        },
        methods: {
            //确认添加
            confirmAdd() {
                this.staffAddForm.url=this.imageUrl;
                axios.post("/staff/add", this.staffAddForm).then(response => {
                    if(response.data.code===200){
                        this.$message.success(response.data.msg);
                        this.dialogFormVisible = false;
                        this.loadStaff();
                    }
                })
            },
            handleAvatarSuccess(res, file) {//res:服务器响应的数据，  file:上传的文件对象
                // this.imageUrl = URL.createObjectURL(file.raw);
                this.imageUrl = res.data
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像只能是图片类型!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            //添加按钮事件
            addStaff() {
                this.dialogFormVisible = true;
            },
            //加载所有部门
            loadDept() {
                axios.get("/dept/list").then(resp => {
                    this.depts = resp.data.data;
                })
            },
            //加载所有职位
            loadRole() {
                axios.get("/role/list").then(resp => {
                    this.roles = resp.data.data;
                })
            },
            //加载所有的分店
            loadBranch() {
                axios.get("/branch/list").then(resp => {
                    this.branchs = resp.data.data;
                })
            },

            //加载员工列表
            loadStaff() {
                axios.post("/staff/list?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize, this.empSearchForm).then(resp => {
                    this.emps = resp.data.data.list;
                    this.total = resp.data.data.total;
                })
            },
            //搜索函数
            onSubmit() {
                this.loadStaff()
            },
            //每页显示条数改变时候触发
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadStaff();
            },
            //当前页码改变时候触发
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadStaff();
            }
        }
    })
</script>
</html>
